<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html>

	<head>
		<meta charset="utf-8">
		<title>Login Page</title>
		<!-- 样 式 文 件 -->

		<link rel="stylesheet" th:href="@{/static/component/pear/css/pear.css}" />
		<link rel="stylesheet" th:href="@{/static/admin/css/other/login.css}" />
	</head>
    <!-- 代 码 结 构 -->
	<body background="/static/admin/images/background.svg" style="background-size: cover;" >

		<form class="layui-form" action="javascript:void(0);" lay-filter="add_form">
			<div class="layui-form-item">
				<img class="logo" src="/static/admin/images/logo.png" />
				<div class="title">Xiaozhi Admin</div>
				<div class="desc">
					引 领 后 端 辉 煌 独 一 无 二
				</div>
			</div>
			<div class="layui-form-item">

				<input placeholder="账 户 : admin " name="username" lay-verify="required" hover class="layui-input" id="username"  />
<!--				<input placeholder="账 户 : admin " name="username" lay-verify="required" hover class="layui-input" id="username" th:value="admin" />-->
			</div>
			<div class="layui-form-item">
				<input placeholder="密 码 : 123456 " type="password" name="password" lay-verify="required" hover class="layui-input" id="password" />
<!--				<input placeholder="密 码 : admin " type="password" name="password" lay-verify="required" hover class="layui-input" id="password" th:value="123456"/>-->
			</div>
			<div class="layui-form-item" th:if="${isOpen}">
				<input placeholder="验证码 : " name="verCode"  hover  lay-verify="required" class="code layui-input layui-input-inline" id="code"/>
				<img th:src="@{/admin/captcha}" class="codeImage" onclick="this.src=this.src+'?'+Math.random()"/>
			</div>
			<div class="layui-form-item">
				<input type="hidden" name="remember" value="false">
				<input type="checkbox" name="remember" title="记住密码" id="remember" value="true" lay-skin="primary">
			</div>
			<div class="layui-form-item">
				<button type="button" class="pear-btn pear-btn-success login" lay-submit lay-filter="login">
					登 入
				</button>
			</div>
		</form>
		<!-- 资 源 引 入 -->

		<script th:src="@{/static/component/layui/jquery-3.6.0.min.js}"></script>
		<script th:src="@{/static/component/layui/jquery.cookie.js}"></script>
		<script th:src="@{/static/component/layui/layui.js}"></script>
		<script th:src="@{/static/component/pear/pear.js}"></script>

		<script>
			layui.use(['form', 'button', 'popup','jquery'], function() {
				var form = layui.form;
				var button = layui.button;
				var popup = layui.popup;
				var $ = layui.jquery;
                // 登 录 提 交
				form.on('submit(login)', function(data) {

					/// 验证
					var username = data.field.username;
					var password = data.field.password;
					var code = data.field.verCode;
					var rememberMe = data.field.remember;
					if (code !==undefined){
						if (code === '' || code.length<5){
							layer.alert("验证码不能为空或长度不够");
							return false;
						}
					}
					if (username === '' || username.length<=0){
						layer.alert("用户名不能为空");
						return false;
					}
					if (password === '' || password.length<=0){
						layer.alert("密码不能为空");
						return false;
					}
					/// 登录
					$.ajax({
						type:'post',
						url:window.location.protocol+'//'+window.location.host+'/admin/login',
						dataType:'json',
						data:JSON.stringify(data.field),
						contentType:'application/json',
						success:function (res) {
							if (res.code === 500){
								layer.alert(res.msg)
								$('.codeImage').prop("src","captcha" + "?" + Math.random());

							}
							if (res.code === 0){
								if(rememberMe){     //记住密码
									$.cookie('user',$("#username").val().trim()+'-'+$("#password").val().trim(),{expires: 7 }); //7天有效期
								}else{
									$.cookie('user',null);
								}
								popup.success("登录成功", function() {
											location.href = "/admin/index"
								});
							}

						},
						error:function () {
							layer.alert("用户名或密码错误")
						}
					});
					return false;
					})
			})
			$(function () {
				//从cookie中获取记住的用户名密码
				var user = $.cookie('user');
				if(typeof(user)!='undefined'&&user!='null'){
					var userNameAndPassword = user.split("-");
					$("#username").val(userNameAndPassword[0]);
					$("#password").val(userNameAndPassword[1]);
					$("#remember").attr({"checked":"checked"});
					$("#remember").next().addClass("layui-form-checked");
				}
			})
		</script>
	</body>
</html>
